<template>
  <view class="styleGuideHall">
    <!-- <toast></toast> -->
    <!-- <u-navbar title="财务中心" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <image class="image1" src="../../static/image/vllageCommunity1.png" mode="" />
    <view class="line-tab">
      <u-tabs
        lineColor="#BE1B20"
        :activeStyle="{
          color: '#BE1B20',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#999999',
          fontSize: '26rpx',
          transform: 'scale(1)',
        }"
        :list="list"
        @change="switchTab"
      ></u-tabs>
    </view>
    <view class="workCont" v-if="!loadingShow">
      <view class="text1" v-for="(v, i) in fourList" :key="i" @click="gotoJump('/pageContent/affair/messageList', v)">
        <text class="txt2 u-line-1">{{ v.name }}</text>
        <u-icon name="arrow-right" color="#999" size="18"></u-icon>
      </view>

      <view class="noList" v-if="!(fourList && fourList.length)">
        <img src="../../static/image/noList.png" />
        <view class="textTip">暂无信息</view>
      </view>
    </view>
    <view class="loading" v-if="loadingShow"><u-loading-icon></u-loading-icon></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadingShow: true,
      fourList: [],
      pidStr: 36,
      options: {},
      list: [
        {
          name: '党务公开',
          pidStr: 36,
        },
        {
          name: '村（居）务公开',
          pidStr: 38,
        },
        {
          name: '财务公开',
          pidStr: 39,
        },
      ],
    }
  },
  onLoad(options) {
    this.options = options
    this.changeOne(36)
  },
  methods: {
    // 获取分类
    changeOne(str) {
      this.loadingShow = true
      this.$https
        .post({
          url: '/axh/dtClassify/findThreeClassifyById',
          data: { pidStr: str, phoneAuth: 1 },
        })
        .then((data) => {
          this.loadingShow = false
          if (str == 39) {
            this.fourList = [{ name: '财务收支情况(2023年之前数据)' }, { name: '财务收支情况(2023年之后数据)' }]
          } else {
            this.fourList = data.result
          }
        })
    },
    switchTab(e) {
      this.loadingShow = false
      if (e.index == 0) {
        this.changeOne(36)
      } else if (e.index == 1) {
        this.changeOne(38)
      } else if (e.index == 2) {
        this.changeOne(39)
      }
      console.log(e)
      this.pidStr = e.pidStr
    },
    gotoJump(url, item) {
      // 财务公开特殊处理
      if (this.pidStr == 39) {
        if (item.name == '财务收支情况(2023年之前数据)') {
          //#ifdef H5
          location.href = 'http://axh.dfr.cool/index.php/Home/Index/swgkm/m/9.html'
          //#endif
        }
        if (item.name == '财务收支情况(2023年之后数据)') {
          uni.navigateTo({
            url: '/pageContent/finance/content',
          })
        }
      } else if (item) {
        uni.navigateTo({
          url: `${url}?fourClassifyId=${item.id}&pidStr=${this.pidStr}&twoClassifyId=${this.options.id}&title=${item.name}`,
        })
      } else {
        uni.navigateTo({
          url: url,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.styleGuideHall {
  background: #fff;
  min-height: 100vh;
  .image1 {
    width: 100%;
    height: 310rpx;
    margin-bottom: 24rpx;
  }
  .line-tab {
    background: #fff;
    padding-bottom: 8rpx;
    border-bottom: 1px solid #e5e5e5;
  }
  .workCont {
    background: #ffffff;
    margin-bottom: 24rpx;

    .text1 {
      display: flex;
      justify-content: space-between;
      padding: 24rpx;
      color: #333333;
      border-bottom: 1px solid #eeeeee;
      .txt2 {
        width: 560rpx;
        line-height: 1.7;
      }
    }
  }
}
.loading {
  margin-top: 50rpx;
}
</style>